<template>
  <div class="online-box" :class="hide_right">
    <a rel="nofollow" class="online-slide-btn" :class="hide_btn" href="javascript:;" @click="closeBtn(false)" title="点击展开"
      ><i class="fa fa-comments"></i>在线咨询<i class="fa fa-angle-double-left"></i
    ></a>
    <h1 class="online-title text-18px">
      在线咨询
      <a rel="nofollow" class="online-close-btn" href="javascript:;" @click="closeBtn(true)" title="点击缩起"
        ><i class="fa fa-angle-double-right"></i
      ></a>
    </h1>
    <div class="p-5px mt-20px bg-white">
      <ul class="pl-0 text-[#cc3300] leading-2em mb-10px">
        <li class="font-[700]">{{ site_config.short_name }}</li>
        <li>手机号码：</li>
        <li>{{ site_config.mobile }}</li>
        <li>微信号即手机号</li>
        <li>
          <img :src="site_config.qrcode" alt="" width="100%" height="100%" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
const isClose = ref(false);
const hide_btn = computed(() => (isClose.value ? 'show' : 'hide'));
const hide_right = computed(() => (isClose.value ? 'hide-right' : 'show-right'));
const site_config = useSiteConfigStore();
const closeBtn = (bool: boolean) => {
  isClose.value = bool;
};
</script>

<style scoped>
.online-box {
  position: fixed;
  top: 200px;
  right: -158px;
  z-index: 9999;
  width: 133px;
  padding: 10px;
  font-family: 'Microsoft Yahei';
  background: #333333;
  right: 0;
}
.online-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
}
.online-title {
  position: relative;
  margin: 0;
  font-weight: 700;
  color: #eed8cc;
  text-shadow: 0px 1px 2px #333333;
}
.online-slide-btn {
  position: absolute;
  top: 50px;
  left: -55px;
  display: block;
  width: 30px;
  padding: 10px;
  font-size: 1.417em;
  font-weight: 700;
  text-align: center;
  color: #eed8cc;
  background: #333333;
  text-shadow: 0px 1px 2px #2d190f;
  text-decoration: none;
}
.online-slide-btn:hover {
  color: #fff;
  background: #8d4e2f;
}

.hide {
  display: none;
}
.show {
  display: block;
}
.hide-right {
  right: -158px;
}
.show-right {
  right: 0;
}
</style>
